<script setup lang="ts">
import AppTable from "@/components/app/AppTable.vue";
import { ref } from 'vue'
defineOptions({
  // eslint-disable-next-line vue/multi-word-component-names
  name: "OperLog"
})
// 控制详情模态框显示
const dialogVisible = ref(false)

// 操作日志详情数据
const operLogDetail = ref({
  id: '',
  operName: '',
  operModule: '',
  operType: '1',
  operIp: '',
  operLocation: '',
  operUrl: '',
  operMethod: '',
  operParam: '',
  status: '0',
  errorMsg: '',
  operTime: ''
})

function handleBtnClick(key: string, data: any[] | null) {
  console.log(key, data)
}

// 打开详情模态框
const openDetail = (row: any) => {
  operLogDetail.value = { ...row }
  dialogVisible.value = true
}

// 处理过长文本的显示
const formatLongText = (text: string, maxLength: number = 30) => {
  if (!text) return '';
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
}
</script>

<template>
  <div>
    <AppTable
      title="操作日志"
      :search-info="[
        {
          label: '操作人员',
          key: 'operName',
          value: ''
        },
        {
          label: '操作类型',
          key: 'operType',
          value: '',
          type: 'select',
          options: [
            {
              value: '1',
              label: '新增'
            },
            {
              value: '2',
              label: '修改'
            },
            {
              value: '3',
              label: '删除'
            },
            {
              value: '4',
              label: '查询'
            },
            {
              value: '5',
              label: '其他'
            }
          ]
        },
        {
          label: '操作状态',
          key: 'status',
          value: '',
          type: 'select',
          options: [
            {
              value: '0',
              label: '成功'
            },
            {
              value: '1',
              label: '失败'
            }
          ]
        }
      ]"
      :btn-show="{
        add: false,
        edit: false,
        delete: false,
        export: false,
        import: false
      }"
      :pageable="true"
      api-method="get"
      api-path="/api/sys/log/oper"
      @handle-btn-click="handleBtnClick"
      @multiple-selection="data => {console.log(data)}">
      <template v-slot:actionBar>
      </template>
      <template v-slot:tableColumn>
        <el-table-column prop="id" label="编号" width="70" align="left"/>
        <el-table-column prop="operName" label="操作人员" align="left"/>
        <el-table-column prop="operModule" label="操作模块" align="left"/>
        <el-table-column prop="operType" label="操作类型" align="left">
          <template #default="scope">
            <el-button link v-if="scope.row.operType === '1'">新增</el-button>
            <el-button link v-else-if="scope.row.operType === '2'" type="warning">修改</el-button>
            <el-button link v-else-if="scope.row.operType === '3'" type="danger">删除</el-button>
            <el-button link v-else-if="scope.row.operType === '4'" type="info">查询</el-button>
            <el-button link v-else-if="scope.row.operType === '5'" type="info">其他</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="operIp" label="主机地址" align="left"/>
        <el-table-column prop="operLocation" label="操作地点" align="left"/>
        <el-table-column prop="operUrl" label="请求URL" align="left">
          <template #default="scope">
            <el-tooltip
              :content="scope.row.operUrl"
              :disabled="!scope.row.operUrl || scope.row.operUrl.length <= 30"
              placement="top">
              <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                {{ formatLongText(scope.row.operUrl, 30) }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="operMethod" label="请求方式" align="left"/>
        <el-table-column prop="operParam" label="请求参数" align="left">
          <template #default="scope">
            <el-tooltip
              :content="scope.row.operParam"
              :disabled="!scope.row.operParam || scope.row.operParam.length <= 30"
              placement="top">
              <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                {{ formatLongText(scope.row.operParam, 30) }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="scope">
            <el-button link v-if="scope.row.status === '0'" type="success">【成功】</el-button>
            <el-button link v-if="scope.row.status === '1'" type="danger">【失败】</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="errorMsg" label="错误消息" align="left">
          <template #default="scope">
            <el-tooltip
              :content="scope.row.errorMsg"
              :disabled="!scope.row.errorMsg || scope.row.errorMsg.length <= 30"
              placement="top">
              <span style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                {{ formatLongText(scope.row.errorMsg, 30) }}
              </span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="operTime" label="操作时间" width="160" align="left"/>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="openDetail(scope.row)">
              详情
            </el-button>
          </template>
        </el-table-column>
      </template>
    </AppTable>

    <!-- 操作日志详情模态框 -->
    <el-dialog v-model="dialogVisible" title="操作日志详情" width="700px" destroy-on-close>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="编号">{{ operLogDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="操作人员">{{ operLogDetail.operName }}</el-descriptions-item>
        <el-descriptions-item label="操作模块">{{ operLogDetail.operModule }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">
          <el-tag v-if="operLogDetail.operType === '1'">新增</el-tag>
          <el-tag v-else-if="operLogDetail.operType === '2'" type="warning">修改</el-tag>
          <el-tag v-else-if="operLogDetail.operType === '3'" type="danger">删除</el-tag>
          <el-tag v-else-if="operLogDetail.operType === '4'" type="success">查询</el-tag>
          <el-tag v-else-if="operLogDetail.operType === '5'" type="info">其他</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="主机地址">{{ operLogDetail.operIp }}</el-descriptions-item>
        <el-descriptions-item label="操作地点">{{ operLogDetail.operLocation }}</el-descriptions-item>
        <el-descriptions-item label="请求URL">
          {{operLogDetail.operUrl}}
        </el-descriptions-item>
        <el-descriptions-item label="请求方式">
          <el-tag
            :type="operLogDetail.operMethod === 'GET' ? 'success' :
                   operLogDetail.operMethod === 'POST' ? 'warning' :
                   operLogDetail.operMethod === 'PUT' ? 'primary' :
                   operLogDetail.operMethod === 'DELETE' ? 'danger' : ''">
            {{ operLogDetail.operMethod }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="请求参数">
          <el-tooltip
            :content="operLogDetail.operParam"
            :disabled="!operLogDetail.operParam || operLogDetail.operParam.length <= 50"
            placement="top">
            <div style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
              {{ formatLongText(operLogDetail.operParam, 50) }}
            </div>
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag v-if="operLogDetail.status === '0'" type="success">成功</el-tag>
          <el-tag v-else-if="operLogDetail.status === '1'" type="danger">失败</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="错误消息">
          <el-tooltip
            :content="operLogDetail.errorMsg"
            :disabled="!operLogDetail.errorMsg || operLogDetail.errorMsg.length <= 50"
            placement="top">
            <span>{{ formatLongText(operLogDetail.errorMsg, 50) }}</span>
          </el-tooltip>
        </el-descriptions-item>
        <el-descriptions-item label="操作时间">{{ operLogDetail.operTime }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped></style>
